<template>
  <div class="recruit">
    <div class="top">
      <div class="top_line_bg">
        <div class="top_line">
          <div class="logo">
            <img src="../assets/logo.jpg" alt="溟大科技" />
          </div>
          <div class="nav">
            <ul>
              <router-link to="/solution"
                ><li><a href="/baiduzt/rjwb/">首页</a></li></router-link
              >
              <router-link to="/about"
                ><li><a href="/baiduzt/sheji/">商业设计</a></li></router-link
              >
              <router-link to="/details"
                ><li class="nav_d"><a>机构简介</a></li></router-link
              >
              <router-link to="/problem"
                ><li class="nav_d"><a>常见问题</a></li></router-link
              >
              <router-link to="/case"
                ><li class="nav_d"><a>项目案例</a></li></router-link
              >
              <router-link to="/contact"
                ><li><a>业务合作</a></li></router-link
              >
              <router-link to="/recruit"
                ><li><a href="/hr/">招贤纳仕</a></li></router-link
              >
              <!-- <li><a href="/company/">服务中国 </a></li> -->
            </ul>
          </div>
          <!-- <div id="bdcs">
            <div class="bdcs-container">
              <meta http-equiv="x-ua-compatible" content="IE=9" />
              <div class="bdcs-main bdcs-clearfix" id="default-searchbox">
                <div class="bdcs-search bdcs-clearfix" id="bdcs-search-inline">
                  <form
                    action=""
                    method="get"
                    target="_blank"
                    class="bdcs-search-form"
                    autocomplete="off"
                    id="bdcs-search-form"
                  >
                    <input type="hidden" name="s" value="6892269738431404018" />
                    <input type="hidden" name="entry" value="1" />
                    <input
                      type="text"
                      name="q"
                      class="bdcs-search-form-input"
                      id="bdcs-search-form-input"
                      placeholder=""
                    />
                    <input
                      type="button"
                      class="bdcs-search-form-submit "
                      id="bdcs-search-form-submit"
                      value=""
                    />
                  </form>
                </div>
              </div>
              <div class="so_advice">
                <a href="javascript:void(0);">搜服务</a>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- main -->
    <div class="hr">
      <div class="hr_fenlei">
        <h3>职位分类：</h3>
        <ul>
          <li @click="change(0)" class="hr_hover">
            <a href="javascript:void(0);">所有职位</a>
          </li>
          <li @click="change(1)"><a href="javascript:void(0);">开发类</a></li>
          <!-- <li @click="change(2)"><a href="javascript:void(0);">互联网</a></li> -->
          <!-- <li @click="change(3)"><a href="javascript:void(0);">设计类</a></li> -->
          <!-- <li @click="change(4)"><a href="javascript:void(0);">运维类</a></li> -->
          <!-- <li @click="change(5)"><a href="javascript:void(0);">服务类</a></li> -->
          <li @click="change(6)"><a href="javascript:void(0);">销售类</a></li>
          <li @click="change(7)"><a href="javascript:void(0);">实习生</a></li>
        </ul>
      </div>
      <div style="clear:both;"></div>
      <div class="hr_listbg">
        <div class="hr_list">
          <ul v-if="bool == true">
            <li v-for="(item, index) in list" :key="index">
              <h3 @click="toDetail(item.position)">
                <a href="javascript:void(0);">{{ item.position }}</a>
              </h3>
              <p>职位要求：{{ item.details }}&nbsp;岗位待遇：较优</p>
              <p class="third">
                <span>地点: {{ item.address }}</span
                ><span>公司性质: {{ item.nature }}</span
                ><span>公司规模: {{ item.scale }}</span
                ><span>经验: {{ item.experience }}</span
                ><span>学历: {{ item.education }}</span
                ><span style="margin-right:0px;"
                  >职位月薪: {{ item.monthly }}元/月</span
                ><span class="apply"><a href="#hr_tip">申请岗位</a></span>
              </p>
            </li>
          </ul>
          <!-- 详情 -->
          <div class="hr_nr" v-if="boo == true">
            <h3>{{ position }}</h3>
            <div class="hr_des">
              <ul>
                <li><span>职位月薪：</span>4001-6000元/月</li>
                <li><span>工作地点：</span>武汉-洪山区</li>
                <li><span>工作性质：</span>全职</li>
                <li><span>工作经验：</span>不限</li>
                <li><span>最低学历：</span>大专</li>
              </ul>
            </div>
            <div class="hr_content">
              <div id="MyContent">
                <p><strong>职位要求：</strong></p>
                <p>1.计算机相关专业或者理工科专业优先，应往届毕业生均可；</p>
                <p>2.对互联网有深厚的兴趣；对新兴游戏感兴趣</p>
                <p>3.学历能力强，有良好逻辑思维能力；</p>
                <p>4.年龄18-28岁，超龄勿扰。</p>
                <p>工作时间：9:00-18:00 午休2小时</p>
                <p>&nbsp;</p>
                <p><strong>岗位待遇 ：</strong></p>
                <p>
                  1.入职签订劳动合同、五险一金、三奖三补（三奖：年终奖、满勤奖、本岗位绩效奖；三补：通讯补助，通勤补助、伙食补助）
                </p>
                <p>2.国家法定节假日、周六日双休、带薪年假等</p>
                <p>3.待遇优厚，五险一金，双休，法定假日。</p>
                <p>4.薪酬=基本工资+绩效奖金+五险一金+餐补+房补</p>
                <p>&nbsp;</p>
                <p><strong>工作地址：</strong></p>
                <p>武汉市洪山区现代世贸中心C座208</p>
                <p><br /></p>
              </div>
            </div>
            <div class="hr_button">
              <a class="hr_apply" href="#hr_tip">申请岗位</a>
            </div>
          </div>
          <a name="hr_tip" id="hr_tip" class="hr_tip"></a>
        </div>
      </div>
    </div>
    <div class="c9">
      <div class="c_t">
        <i>CN Good Job</i>
        <h2>虚位以待</h2>
        <p><span></span><span></span></p>
      </div>
      <div class="c9_hr">
        <form name="myform">
          <input type="hidden" value="Save" name="action" />
          <input type="hidden" value="1" name="id" />
          <input type="hidden" value="" name="m" />
          <input type="hidden" value="" name="d" />
          <ul>
            <li>
              <input
                name="KS_name"
                type="text"
                required=""
                id="KS_name"
                placeholder="您的称呼　Name"
              />
            </li>
            <li>
              <input
                name="KS_phone"
                type="number"
                required=""
                min="10000000000"
                max="19999999999"
                id="KS_phone"
                placeholder="联系方式　Phone"
              />
            </li>
            <li>
              <input
                name="KS_mail"
                type="text"
                id="KS_mail"
                placeholder="个人邮箱　Mail"
              />
            </li>
            <li>
              <textarea
                name="KS_detail"
                type="text"
                id="KS_intention"
                placeholder="求职意向　Intention"
              ></textarea>
            </li>
            <li class="sub">
              <input name="submit" type="button" id="button" value="加入我们" />
            </li>
          </ul>
        </form>
      </div>
    </div>
    <!-- footer -->
    <div class="bottom">
      <div class="bottom_all">
        <ul class="bottom_nav">
          <router-link to="/solution"
            ><li><a href="/baiduzt/rjwb/">首页</a></li></router-link
          >
          <router-link to="/about"
            ><li><a href="/baiduzt/sheji/">商业设计</a></li></router-link
          >
          <router-link to="/details"
            ><li class="nav_d"><a>机构简介</a></li></router-link
          >
          <router-link to="/problem"
            ><li class="nav_d"><a>常见问题</a></li></router-link
          >
          <router-link to="/case"
            ><li class="nav_d"><a>项目案例</a></li></router-link
          >
          <router-link to="/contact"
            ><li><a>业务合作</a></li></router-link
          >
          <router-link to="/recruit"
            ><li><a href="/hr/">招贤纳仕</a></li></router-link
          >
          <div class="contact_us">
            <p>
              <br />
              公司地址：武汉市洪山区现代世贸中心C座208 <br />
              联系电话：400-080-3312
            </p>
          </div>
        </ul>
        <div class="logo"><img src="../assets/logo (2).png" /></div>
      </div>
      <div class="bottom_cert">
        <p class="banquan">2010-2021 溟大科技信息科技集团有限公司</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      boo: false,
      bool: true,
      position: "所有职位1",
    };
  },
  created() {
    for (let i = 0; i < 6; i++) {
      this.list[i] = {};
      this.list[i].position = "所有职位第" + (i + 1) * 1 + "岗位";
      this.list[i].details = "会写" + i + "w行代码";
      this.list[i].address = "第" + i + "小区";
      this.list[i].nature = "股份制公司";
      this.list[i].scale = i + "人";
      this.list[i].experience = "不限";
      this.list[i].education = i + "年级";
      this.list[i].monthly = "500" + i;
    }
    this.list = this.list.filter((d) => d);
  },
  methods: {
    change(val) {
      this.boo = false;
      this.bool = true;
      switch (val) {
        case 0:
          var open = "所有职位";
          break;
        case 1:
          open = "开发类";
          break;
        case 2:
          open = "互联网";
          break;
        case 3:
          open = "设计类";
          break;
        case 4:
          open = "运维类";
          break;
        case 5:
          open = "服务类";
          break;
        case 6:
          open = "销售类";
          break;
        case 7:
          open = "实习生";
          break;
      }
      for (let i = 0; i < 6; i++) {
        this.list[i] = {};
        this.list[i].position = open + "第" + (i + 1) * 1 + "岗位";
        this.list[i].details = "会写" + i + "w行代码";
        this.list[i].address = "第" + i + "小区";
        this.list[i].nature = "股份制公司";
        this.list[i].scale = i + "人";
        this.list[i].experience = "不限";
        this.list[i].education = i + "年级";
        this.list[i].monthly = "500" + i;
      }
      this.list = this.list.filter((d) => d);
    },
    toDetail(val) {
      this.position = val;
      this.boo = true;
      this.bool = false;
    },
  },
};
</script>
<style scoped>
/* top */
* {
  margin: 0;
  padding: 0;
  word-break: break-all;
  vertical-align: bottom;
  font-family: "microsoft yahei";
  -moz-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
body {
  font: 12px "microsoft yahei";
  background: #fff;
  position: relative;
}
.top {
  width: 100%;
  height: 440px;
  background: url("../assets/zhaopin_banner.jpg") no-repeat center;
}
.top_line_bg {
  width: 100%;
  height: 90px;
  background-color: #fff;
}
.top_line {
  width: 1200px;
  margin: 0 auto;
  height: 90px;
}
.top_line .logo {
  float: left;
  overflow: hidden;
  margin-top: 8px;
}
img {
  border: 0;
}
.top_line .nav {
  float: left;
  margin: 30px 0 0 50px;
}
ul,
li {
  list-style: none;
}
.nav li {
  width: 84px;
  height: 29px;
  float: left;
  margin: 0 5px;
  background-image: url("../assets/hr_nav_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10%;
}
.nav li:hover {
  background-size: 100%;
}
.nav li a {
  color: #444;
  display: block;
  width: 84px;
  height: 29px;
  text-align: center;
  line-height: 29px;
  font-size: 14px;
}
a {
  text-decoration: none;
  color: #283a46;
}
.nav li.nav_d {
  background-image: url("../assets/hr_nav_bg2.png");
  padding: 0 7px;
}
.top_line #bdcs {
  float: right;
  overflow: hidden;
}
.bdcs-main {
  float: left;
}
#bdcs form {
  opacity: 0.7;
  border: 1px solid #444;
  width: 160px;
  height: 26px;
  border-radius: 14px;
  margin-top: 33px;
}
#bdcs input {
  background: none;
  border: none;
  color: #444;
}
input,
textarea {
  outline: none;
}
#bdcs input.bdcs-search-form-input {
  height: 26px;
  width: 105px;
  margin-left: 20px;
}
#bdcs input.bdcs-search-form-submit {
  width: 26px;
  height: 26px;
  background: url("../assets/hr_so_bg.png") no-repeat center;
  /* cursor: pointer; */
}
.so_advice {
  overflow: hidden;
  height: 26px;
  padding-top: 33px;
  margin-left: 10px;
  float: left;
}
.so_advice a {
  color: #444;
  font-size: 12px;
  opacity: 0.7;
  line-height: 26px;
  margin-right: 10px;
}
.nav li a.double {
  width: auto;
  float: left;
  padding: 0 4px;
}
/* hr */
.hr {
  width: 100%;
  background-color: #fff;
  padding-top: 30px;
}
.hr_fenlei {
  width: 1150px;
  margin: 0 auto;
  overflow: hidden;
}
.hr_fenlei h3 {
  font-size: 18px;
  color: #000;
  float: left;
  font-weight: normal;
  line-height: 30px;
}
.hr_fenlei ul li {
  float: left;
  margin: 0 5px;
}
/* .hr_fenlei ul li.hr_hover a {
    border-bottom: 3px solid #E83C41;
    color: #E83C41;
} */
.hr_fenlei ul li a:hover {
  color: #e83c41;
}
.hr_fenlei ul li a {
  display: block;
  padding: 0 20px;
  height: 50px;
  line-height: 28px;
  font-size: 18px;
  color: #868686;
}
.hr_listbg {
  background-color: #f7f7f7;
  width: 100%;
  overflow: hidden;
  padding-bottom: 60px;
  padding-top: 10px;
}
.hr_list {
  width: 1200px;
  margin: 0 auto;
}
.hr_list ul li {
  margin-top: 20px;
  overflow: hidden;
  background-color: #fff;
  padding: 4px 0px;
  border: 1px solid #fff;
}
.hr_list ul li h3 {
  background: url(../assets/tip.png) no-repeat 30px 13px;
  font-weight: normal;
  font-size: 20px;
  width: 1070px;
  padding: 10px 0 10px 57px;
}
.hr_list ul li h3 a {
  color: #303030;
}
.hr_list ul li p {
  border-top: 1px solid #ddd;
  padding: 10px 0px;
  margin: 0 32px;
  overflow: hidden;
  color: #616161;
  font-size: 16px;
  line-height: 26px;
}
.hr_list ul li p.third {
  padding: 0;
  border: none;
}
.hr_list ul li p span {
  padding-left: 15px;
  background: url(../assets/tip2.png) no-repeat 0 15px;
  font-size: 14px;
  color: #969696;
  margin-right: 20px;
  float: left;
  line-height: 45px;
}
.hr_list ul li p span.apply {
  padding: 0;
  background: none;
  float: right;
}
.hr_list ul li p span a {
  display: block;
  width: 120px;
  text-align: center;
  line-height: 34px;
  font-size: 16px;
  height: 35px;
  background-color: #f5a020;
  color: #fff;
  border-radius: 18px;
}
/* 详情 */
.hr_nr {
  background-color: #fff;
  padding: 0 40px;
}
.hr_nr h3 {
  padding: 30px 0 5px 0;
  border-bottom: 1px solid #ddd;
  font-size: 34px;
  color: #000000;
  font-weight: normal;
  height: 60px;
}
.hr_des {
  border-bottom: 1px dashed #ddd;
  padding: 20px 0;
}
.hr_des ul li {
  font-size: 16px;
  color: #616161;
  line-height: 28px;
}
.hr_des ul li span {
  color: #616161;
}
.hr_content {
  padding: 20px 0;
  border-bottom: 1px dashed #ddd;
}
.hr_content p {
  font-size: 18px;
  color: #333333;
  line-height: 35px;
}
strong {
  font-weight: bold;
}
.hr_button {
  overflow: hidden;
  padding-bottom: 40px;
}
.hr_button a.hr_apply {
  background-color: #f5a020;
}
.hr_button a {
  margin: 30px 30px 0 0;
  float: left;
  display: block;
  width: 150px;
  text-align: center;
  line-height: 43px;
  font-size: 18px;
  height: 45px;
  color: #fff;
  border-radius: 23px;
}

/* C9 */
.c_t i {
  font-style: normal;
  color: #cbcbcb;
  font-size: 18px;
  text-align: center;
  display: block;
}
.c_t h2 {
  color: #292929;
  font-size: 36px;
  text-align: center;
  font-weight: normal;
  margin: 3px 0 13px 0;
}
.c_t p {
  width: 46px;
  margin: 0 auto;
}
.c_t p span {
  display: block;
  background-color: #008ed6;
  width: 20px;
  height: 2px;
  float: left;
  margin: 0 1px;
}
.c9 {
  width: 100%;
  overflow: hidden;
  height: 725px;
  padding: 40px 0 20px 0;
  background: url("../assets/c9_bg.jpg") top 37px center no-repeat;
  max-width: 1920px;
  margin: 0 auto;
}
.c9_hr {
  background-color: rgba(44, 44, 44, 0.09);
  width: 520px;
  height: 438px;
  margin: 0 auto;
  padding: 6px;
  margin-top: 43px;
}
.c9_hr form {
  width: 520px;
  height: 412px;
  background-color: #f1f1f1;
  padding-top: 26px;
}
.c9_hr input {
  width: 451px;
  padding-left: 17px;
  height: 40px;
  background-color: #ffffff;
  border: 0;
  color: #555;
  font-size: 14px;
}
input,
textarea {
  outline: none;
}
ul,
li {
  list-style: none;
}
.c9_hr li {
  width: 468px;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 20px;
}
.c9_hr input#button {
  width: 137px;
  height: 41px;
  background-color: #f08d22;
  font-size: 14px;
  color: #ffffff;
  padding: 0;
  margin: 0 auto;
  display: block;
  margin-top: 15px;
  /* cursor: pointer; */
}
.c9_hr textarea {
  width: 451px;
  height: 104px;
  padding-left: 17px;
  padding-top: 10px;
  background-color: #ffffff;
  border: 0;
  font-size: 14px;
}
/* footer */
.bottom {
  width: 100%;
  color: #aaa;
  font-size: 14px;
  background-color: #333;
  height: 150px;
}
.bottom_all {
  width: 1200px;
  padding-top: 15px;
  margin: 0 auto;
  overflow: hidden;
}
.bottom_all ul.bottom_nav {
  float: left;
  line-height: 24px;
}
.bottom_all ul.bottom_nav li {
  float: left;
  margin-right: 15px;
}
.bottom a {
  color: #aaa;
}
.bottom_all .logo {
  float: right;
  margin: 10px 20px 0 0;
}
.bottom_cert {
  width: 1050px;
  margin: 0 auto;
  text-align: center;
  color: #666;
}
</style>
